<template>
  <!-- 新增拜访信息 -->
  <div>
    <div>
      <!-- 头部 -->
      <van-row class="header4" gutter="20">
        <van-col span="2">
          <van-icon name="arrow-left" @click="$router.go(-1)" />
        </van-col>
        <van-col span="18">
          <span>新增拜访记录</span>
        </van-col>
        <van-col span="4" @click="$router.push('/home')">
          <span>
            <van-icon name="wap-home-o" />
          </span>
        </van-col>
      </van-row>
    </div>
    <div class="name-phone">
      <van-cell-group class="cell1">
        <van-cell
          title="客户名称"
          v-model="value1"
          is-link
          arrow-direction="down"
          value="下拉搜索"
          required
        />
      </van-cell-group>

      <van-cell-group>
        <van-cell title="拜访标题" v-model="value2" is-link required />
      </van-cell-group>
      <van-field
        readonly
        clickable
        label="拜访原因"
        :value="value"
        is-link
        required
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="value8"
        label="拜访时间"
        required
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          type="date"
          :columns-order="['year','month', 'day' ]"
          v-model="currentDate"
          :formatter="formatter"
          @confirm="onConfir"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
    <div class="xiangqing">
      <van-field
        v-model="value5"
        rows="1"
        autosize
        label="拜访地址"
        type="textarea"
        placeholder="请输入"
      />
      <van-field
        v-model="value6"
        rows="1"
        autosize
        label="拜访情况"
        type="textarea"
        placeholder="请输入"
      />
      <van-field
        v-model="value7"
        rows="1"
        autosize
        label="竞争信息收集情况"
        type="textarea"
        placeholder="请输入"
      />
    </div>
    <div class="lose">
      <van-button color="#003399" round :disabled="bool">保存</van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["disabled"],
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      bool: true,
      value: "",
      showPicker: false,
      columns: ["例行走访", "售中支撑", "售后支撑", "售前支撑"],
      value8: "",
      showPicker: false,
      currentDate: new Date()
    };
  },
  created() {
    if ((this.value1, this.value2, this.value3, this.value4)) {
      this.bool = false;
    }
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onConfir(time) {
      this.value8 = time;
      this.showPicker = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    }
  }
};
</script>
 
<style lang = "less" scoped>
.header4 {
  background-color: #003399;
  color: #fff;
  padding: 0.166667rem 0.066667rem;
  text-align: center;
  display: flex;

  .van-icon {
    font-size: 0.186667rem;
    vertical-align: -0.056667rem;
  }
}
.cell1 {
  margin: 0.133333rem 0;
}
.xiangqing {
  .van-field {
    height: 1rem;
    margin-top: 0.133333rem;
  }
}
.lose {
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 0.533333rem;
  .van-button {
    width: 90%;
    border: none;
    font-size: 0.16rem;
    margin-left: 0.193333rem;
    margin-top: 0.046667rem;
  }
}
</style>